﻿import React from 'react';
import { Card, Spin, Avatar, Image } from 'antd';
import { LoadingOutlined, BarChartOutlined, DeleteOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { useEffect } from 'react';
import axios from 'axios';

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;



const VideoCard = ({ video_id, thumbnail, title, isProcessing, data }) => (
  <Card
    style={{
      width: 350,
    }}
    cover={
      <div style={{
        position: 'relative',
        width: '100%',
        height: '200px'
      }}>
        {/* <img alt="example" src={thumbnail} /> */}
        {isProcessing ? (
          <Spin indicator={antIcon} tip="处理中">
            <video alt="example" src={thumbnail} controls width={'100%'} height={200} style={{
              objectFit: 'contain'
            }}>
            </video>
          </Spin>
        ) : <video alt="example" src={thumbnail} width={'100%'} height={200} controls>
          </video>}
      </div>
    }
    actions={[
      <Link to={'/static'} state={{
        url: thumbnail,
        data: data,
        video_id
      }}><BarChartOutlined /></Link>,
      <DeleteOutlined />,
    ]}
  >
    <Card.Meta title={title} description="This is the description" />
  </Card>
);

const VideoList = () => {
  const [videos, setVideos] = React.useState([]);
  useEffect(() => {
    axios.get('http://192.168.6.168:5000/get_all_data')
      .then(response => {
        console.log(response.data);
        response.data.forEach(video => {
          video.images.sort((a, b) => parseFloat(a.time) - parseFloat(b.time));
        })
        setVideos(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, [])
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
      {videos.map((video) => (
        <VideoCard
          key={video.video_id}
          thumbnail={video.video_url}
          title={'视频'+video.video_id}
          isProcessing={video.status}
          data={video.images}
          video_id={video.video_id}
        />
      ))}
    </div>
  );
};


export default VideoList